<script setup lang="ts">
import type { EquipmentInfoV2Vo, EquipmentVo } from '../type'

import BlockHead from './block-head.vue'

defineOptions({
  name: 'ItemServen',
})
const props = defineProps<{
  equipmentInfo: Nullable<EquipmentInfoV2Vo>
}>()

const data1 = computed(() => {
  return getServenData('10')
})
const data2 = computed(() => {
  return getServenData('20')
})
const data3 = computed(() => {
  return getServenData('30')
})
const data4 = computed(() => {
  return getServenData('40')
})
const data5 = computed(() => {
  return getServenData('50')
})

// 清洗机 10
// 切割机 20
// 钢化炉 30
// 四边机 40
// 直边机 50
function getServenData(key: string): EquipmentVo[] {
  return (unref(props.equipmentInfo).typeList || []).find(item => item.key === key)?.list ?? []
}

function isRunning(status: 0 | 1) {
  return status === 1
}
function substring(str: string | number, len: number = 4) {
  str = Math.round(Number.parseFloat(str.toString()) || 0)
  str = str.toString()
  return str.length >= len ? str.substring(0, len) : str.padStart(len, '0')
}
</script>

<template>
  <div class="h-full w-full flex flex-auto flex-col">
    <BlockHead is-big title="工艺看板" />
    <div class="block-body h-150 w-full flex flex-auto flex-col items-center gap-3 overflow-auto p-3">
      <div class="h-full w-full flex items-center rounded">
        <div class="h-full w-full flex flex-auto items-center overflow-auto p-3">
          <div class="h-full w-full flex flex-wrap items-center">
            <div class="item-fjbzj flex flex-col items-center justify-center">
              <img v-if="data1[0] && isRunning(data1[0].status)" src="./equipment-images/qxj-1.png" alt="stop">
              <img v-else src="./equipment-images/qxj.png" alt="stop">
              <span class="equipment-num mt-3 opacity-80 font-pmzd !relative">{{ data1[0]?.name }}</span>
            </div>
            <div class="item-fjbzj flex flex-col items-center justify-center">
              <img v-if="data2[0] && isRunning(data2[0].status)" src="./equipment-images/qgj-1.png" alt="stop">
              <img v-else src="./equipment-images/qgj.png" alt="stop">
              <span class="equipment-num mt-3 opacity-80 font-pmzd !relative">{{ data2[0]?.name }}</span>
            </div>
            <div class="item-fjbzj flex flex-col items-center justify-center">
              <img v-if="data3[0] && isRunning(data3[0].status)" src="./equipment-images/ghl-1.png" alt="stop">
              <img v-else src="./equipment-images/ghl.png" alt="stop">
              <span class="equipment-num mt-3 opacity-80 font-pmzd !relative">{{ data3[0]?.name }}</span>
            </div>
            <div class="item-fjbzj flex flex-col items-center justify-center">
              <img v-if="data4[0] && isRunning(data4[0].status)" src="./equipment-images/sbj-1.png" alt="stop">
              <img v-else src="./equipment-images/sbj.png" alt="stop">
              <span class="equipment-num mt-3 opacity-80 font-pmzd !relative">{{ data4[0]?.name }}</span>
            </div>
            <div class="item-fjbzj flex flex-col items-center justify-center">
              <img v-if="data5[0] && isRunning(data5[0].status)" src="./equipment-images/a-zbj-1.png" alt="stop">
              <img v-else src="./equipment-images/a-zbj.png" alt="stop">
              <span class="equipment-num mt-3 opacity-80 font-pmzd !relative">{{ data5[0]?.name }}</span>
            </div>
            <div class="item-fjbzj flex flex-col items-center justify-center">
              <img v-if="data5[1] && isRunning(data5[1].status)" src="./equipment-images/a-zbj-1.png" alt="stop">
              <img v-else src="./equipment-images/a-zbj.png" alt="stop">
              <span class="equipment-num mt-3 opacity-80 font-pmzd !relative">{{ data5[1]?.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.item-fjbzj {
  width: 33.33%;

  img {
    // width: 100%;
    height: 164px;
  }
}

.equipment-num,
.meter-reading {
  display: block;
  position: absolute;
  border-radius: 2px;
  // background: rgba(226, 81, 252, 0.5);
  text-align: center;
}

.equipment-num {
  width: auto;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  color: #ffffff;
  text-shadow: 1px 0px 1px #10649C;
  @apply line-clamp-1;
}

.equipment-num-center {
  top: 178px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
